{% extends 'base.html' %}
{% load static %}

{% block title %}Services{% endblock %}

{% block extra_css %}
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css' rel='stylesheet'>
<style>
    :root {
        --primary-color: #4361ee;
        --secondary-color: #3f37c9;
        --success-color: #4bb543;
        --danger-color: #ff3333;
        --warning-color: #ffc107;
        --light-color: #f8f9ff;
        --dark-color: #212529;
        --border-radius: 0.5rem;
        --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
        --transition: all 0.3s ease;
    }

    .page-header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        padding: 2rem 0;
        margin-bottom: 2rem;
        color: white;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
    }

    .page-title {
        font-weight: 700;
        margin: 0;
        font-size: 1.75rem;
    }

    .card {
        border: none;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        transition: var(--transition);
        margin-bottom: 1.5rem;
        overflow: hidden;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
    }

    .card-header {
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding: 1.25rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-title {
        margin: 0;
        font-weight: 700;
        color: var(--dark-color);
        display: flex;
        align-items: center;
    }

    .card-title i {
        margin-right: 0.75rem;
        color: var(--primary-color);
    }

    .service-card {
        border-left: 4px solid var(--primary-color);
    }

    .service-card .card-body {
        padding: 1.5rem;
    }

    .service-meta {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }

    .meta-item {
        display: flex;
        align-items: center;
        color: #6c757d;
        font-size: 0.9rem;
    }

    .meta-item i {
        margin-right: 0.5rem;
        color: var(--primary-color);
    }

    .service-description {
        color: #6c757d;
        margin-bottom: 1.5rem;
        line-height: 1.6;
    }

    .badge {
        font-weight: 500;
        padding: 0.35em 0.65em;
        border-radius: 0.25rem;
    }

    .btn {
        font-weight: 500;
        padding: 0.5rem 1.25rem;
        border-radius: 0.375rem;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn i {
        margin-right: 0.5rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border: none;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
    }

    .btn-sm {
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
    }

    .empty-state {
        text-align: center;
        padding: 3rem 1.5rem;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        color: #e9ecef;
    }

    .empty-state h3 {
        color: #6c757d;
        margin-bottom: 1rem;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .service-meta {
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .btn-group .btn {
            margin-bottom: 0.5rem;
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="page-header mb-4">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">
                    <i class="fas fa-concierge-bell me-2"></i>
                    Our Services
                </h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-white">Home</a></li>
                        <li class="breadcrumb-item active text-white-50" aria-current="page">Services</li>
                    </ol>
                </nav>
            </div>
            {% if user.is_staff %}
            <div>
                <a href="{% url 'appointments:service-create' %}" class="btn btn-light text-primary">
                    <i class="fas fa-plus me-2"></i>Add New Service
                </a>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-12">
            {% if services %}
                {% for service in services %}
                <div class="card service-card mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between flex-wrap">
                            <div class="mb-3">
                                <h3 class="h4 mb-2">{{ service.name }}</h3>
                                <div class="service-meta">
                                    <span class="meta-item">
                                        <i class="far fa-clock"></i>
                                        {{ service.duration }} minutes
                                    </span>
                                    <span class="meta-item">
                                        <i class="fas fa-tag"></i>
                                        ${{ service.price }}
                                    </span>
                                    <span class="meta-item">
                                        <i class="fas {% if service.is_active %}fa-check-circle text-success{% else %}fa-times-circle text-danger{% endif %}"></i>
                                        {% if service.is_active %}Active{% else %}Inactive{% endif %}
                                    </span>
                                </div>
                            </div>
                            {% if user.is_staff %}
                            <div class="d-flex align-items-start">
                                <div class="btn-group">
                                    <a href="{% url 'appointments:service-update' service.pk %}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                                    <a href="{% url 'appointments:service-delete' service.pk %}" class="btn btn-sm btn-outline-danger">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                        
                        {% if service.description %}
                        <div class="service-description">
                            {{ service.description|linebreaksbr }}
                        </div>
                        {% endif %}
                        
                        <div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top">
                            <small class="text-muted">
                                <i class="far fa-calendar-plus"></i> 
                                Created on {{ service.created_at|date:"F j, Y" }}
                            </small>
                            <a href="{% url 'appointments:appointment-create' %}?service={{ service.id }}" class="btn btn-primary btn-sm">
                                <i class="far fa-calendar-plus"></i> Book Now
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="card">
                    <div class="empty-state">
                        <i class="fas fa-concierge-bell"></i>
                        <h3>No Services Available</h3>
                        <p>There are no services to display at the moment.</p>
                        {% if user.is_staff %}
                        <a href="{% url 'appointments:service-create' %}" class="btn btn-primary mt-3">
                            <i class="fas fa-plus me-2"></i>Add Your First Service
                        </a>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add any JavaScript functionality here
    });
</script>
{% endblock %}